<template>
  <view class="coupon-wrap" >
    <view class="list" >
      <view
      v-for="(item, index) in items"
      :key="index"
      class="coupon-item"
      >
        <view class="head-name" >
          <view class="head-title" >
            {{ item.name }}
          </view>
          <view class="head-money" >
            ¥{{ item.offer_amount }}
          </view>
        </view>
        <!-- 倒计时 -->
        <view class="count-line">
          <count-box :countDown="couponCount[index]"></count-box>
        </view>

        <div class="remark" >
          <div class="remark__business" @tap="handleToSelect(item)" >
            <span>仅限用于限定商家</span>
            <i :class="['iconfont icon-arrow-right arrow-bottom', item.remarkShow ? 'arrow-top' : '']" ></i>
          </div>
          <div class="action-btn receive-btn" @click="handleToReceive(item)" >
            去领取
          </div>
        </div>
        <div class="remark-desc" v-if="item.remarkShow" >
          <div class="business-box" >
            <span>商家名称：</span>
            <span>{{ item.issue_merchant }}</span>
          </div>
          <rich-text :nodes="item.remark"></rich-text>
        </div>

      </view>
      <view class="full-green" v-if="!isEmpty">
        <load-more :status="loadingStatus"></load-more>
      </view>
      <view v-else>
        <u-empty description="暂无优惠券～"></u-empty>
        <div class="action-btn look-btn" @click="handleToMyCoupon" >查看已领取优惠券</div>
      </view>

    </view>
  </view>
</template>

<script>
  import { COUPON, COUPON_TAKE } from '@/api/coupon';
  import { SHOP_LIST } from '@/api';
  import loadMore from '@/components/load-more.vue';
  import uEmpty from '@/basic-components/u-empty/index.vue';
  import moreLoadMixins from '@/common/load-more';

  import countDownMixins from './mixins/count-down';
  import countBox from './components/count-box.vue';
  export default {
      components: {
        loadMore,
        uEmpty,
        countBox
      },
      data() {
       
        return {
          shopIds: [],      
        };
      },
      mixins: [moreLoadMixins, countDownMixins],
      onShow() {
        this.resetInit();
        
      },
      onPullDownRefresh() {
        // 初始化
        this.resetInit();
        uni.stopPullDownRefresh();
      },
      methods: {
        initData() {
          // 列表搜索
          const params = {};
          params.page = this.pages.currentPage;
          params.per_page = this.pages.perPage;
          params.region_id=uni.getStorageSync('regionId');
          return this.$http.get(COUPON, params).then(res => {
            const { data, last_page, current_page, total } = res;

            if (data && data.length) {
              data.forEach(item => {
                item.remarkShow = false;
              })
              this.items = this.items.concat(data);
              this.pages.currentPage=current_page+1;
              this.initCount(this.items);
            }
            return {
              perPage: this.pages.perPage,
              currentPage: this.pages.currentPage,
              hasNext: !last_page === current_page,
              empty: current_page === 1 && total === 0,
            };
          });
        },
        handleToSelect(item) {
          item.remarkShow = !item.remarkShow;
        },
        handleToMyCoupon() {
          this.$navigate({
            page: 'myCoupon',
          });
        },
        /**
         * 去领取
         */
        handleToReceive(item) {
          let params = {};
              params['id'] = item.id
          this.$http.post(COUPON_TAKE, params, {
            showLoading: true
          })
          .then(() => {
            this.resetInit();

            setTimeout(() => {
              uni.showToast({
                title: '领取成功',
                icon: 'success',
              });
            }, 300)
          })
        }
      }
  }
</script>

<style lang="less" >
  .coupon-wrap{
    padding-top: 20rpx;
    .coupon-item{
      width: 700rpx;
      margin: auto;
      margin-bottom: 20rpx;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      box-sizing: border-box;
      background-color: #FFFFFF;
      .head-name{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .head-title{
          flex: 1;
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }
        .head-money{
          flex-shrink: 0;
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: red;
        }
      }
      .count-line{
        margin-bottom: 16rpx;
      }
      .remark{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 0;
        padding-top: 30rpx;
        border-top: 1px solid #EEEEEE;
        .arrow-bottom{
          transform: rotate(90deg);
          transition: all 0.5s;
        }
        .arrow-top{
          transform: rotate(-90deg);
        }
        &__business{
          display: flex;
          align-items: center;
          color: #666666;
        }
        .receive-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100rpx;
          height: 44rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          border-radius: 8rpx;
          background-color: red;
        }
      }
      .remark-desc{
        font-size: 24rpx;
        color: #999999;
      }
    }

    .look-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 400rpx;
      height: 76rpx;
      margin: auto;
      font-size: 28rpx;
      background-color: #fedd00;
    }
  }
</style>
